<form (ngSubmit)="submitForm()" [formGroup]="openidForm">
  <div class="d-flex align-items-center my-2 flex-wrap">
    <i class="eos-icons mr-3">lightbulb</i>
    <span class="mr-3">{{ 'openId.CALLBACK_URL' | translate }}</span>
    <span class="text-muted mr-3">{{ openidRedirectURL }}</span>
    <button
      [cdkCopyToClipboard]="openidRedirectURL"
      class="d-flex justify-content-center align-items-center"
      mat-stroked-button
      type="button">
      <i class="eos-icons">content_copy</i>
      {{ 'license.COPY_CODE' | translate }}
    </button>
  </div>
  <div class="row align-items-center my-0 my-md-4">
    <div class="col-12 col-md-6 d-flex align-items-center my-2">
      <i class="eos-icons mr-3">account_box</i>
      <mat-form-field appearance="standard" class="w-100">
        <mat-label>{{ 'openId.ISSUER' | translate }}</mat-label>
        <input formControlName="issuer" matInput />
        <mat-error *ngIf="openidForm.controls.issuer.hasError('required')">
          {{ 'general.REQUIRED' | translate }}
        </mat-error>
        <mat-error *ngIf="openidForm.controls.issuer.hasError('invalidURL')">
          {{ 'okta.INVALID_URL' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
    <div
      class="col-12 col-md-6 d-flex align-items-center my-2"
      *ngIf="isCreated">
      <i class="eos-icons mr-3">assignment_ind</i>
      <mat-form-field appearance="standard" class="w-100">
        <mat-label>{{ 'openId.AUTHORIZATION_ENDPOINT' | translate }}</mat-label>
        <input formControlName="authorization_endpoint" matInput />
      </mat-form-field>
    </div>
    <div
      class="col-12 col-md-6 d-flex align-items-center my-2"
      *ngIf="isCreated">
      <i class="eos-icons mr-3">assignment_ind</i>
      <mat-form-field appearance="standard" class="w-100">
        <mat-label>{{ 'openId.TOKEN_ENDPOINT' | translate }}</mat-label>
        <input formControlName="token_endpoint" matInput />
      </mat-form-field>
    </div>
    <div
      class="col-12 col-md-6 d-flex align-items-center my-2"
      *ngIf="isCreated">
      <i class="eos-icons mr-3">assignment_ind</i>
      <mat-form-field appearance="standard" class="w-100">
        <mat-label>{{ 'openId.USER_INFO_ENDPOINT' | translate }}</mat-label>
        <input formControlName="user_info_endpoint" matInput />
      </mat-form-field>
    </div>
    <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
      <i class="eos-icons mr-3">person</i>
      <mat-form-field appearance="standard" class="w-100">
        <mat-label>{{ 'openId.CLIENT_ID' | translate }}</mat-label>
        <input formControlName="client_id" matInput />
        <mat-error *ngIf="openidForm.controls.client_id.hasError('required')">
          {{ 'general.REQUIRED' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
    <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
      <i class="eos-icons mr-3">vpn_key</i>
      <mat-form-field appearance="standard" class="w-100">
        <mat-label>{{ 'openId.CLIENT_SECRET' | translate }}</mat-label>
        <input
          [type]="passwordVisible ? 'text' : 'password'"
          formControlName="client_secret"
          matInput />
        <mat-error
          *ngIf="openidForm.controls.client_secret.hasError('required')">
          {{ 'general.REQUIRED' | translate }}
        </mat-error>
      </mat-form-field>
      <button
        (click)="passwordVisible = !passwordVisible"
        *ngIf="openidForm.controls.client_secret.value"
        aria-label="Visibility icon to toggle password visibility"
        mat-icon-button
        type="button">
        <i class="eos-icons">{{
          passwordVisible ? 'visibility' : 'visibility_off'
        }}</i>
      </button>
    </div>
    <div class="col-12 d-flex align-items-center my-2">
      <mat-form-field appearance="standard" class="w-100">
        <mat-label>{{ 'openId.SCOPES' | translate }}</mat-label>
        <mat-chip-list #chipList aria-label="Scopes">
          <mat-chip (removed)="remove(scope)" *ngFor="let scope of scopes">
            {{ scope }}
            <button matChipRemove>
              <mat-icon>cancel</mat-icon>
            </button>
          </mat-chip>
          <input
            (matChipInputTokenEnd)="add($event)"
            [matChipInputAddOnBlur]="addOnBlur"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            [placeholder]="'cveProfile.TAGS_INPUT_TIP' | translate" />
        </mat-chip-list>
      </mat-form-field>
    </div>
    <div class="col-12 d-flex align-items-center">
      <i class="eos-icons mr-3">groups</i>
      <mat-form-field appearance="standard" class="w-100">
        <mat-label> {{ 'okta.GROUP_CLAIM' | translate }}</mat-label>
        <input formControlName="group_claim" matInput />
      </mat-form-field>
    </div>
  </div>
  <mat-form-field appearance="standard">
    <mat-label>{{ 'ldap.DEFAULT_ROLE' | translate }}</mat-label>
    <mat-select formControlName="default_role">
      <mat-option
        *ngFor="let role of openidData.server.mappable_roles.group_roles"
        [value]="role">
        {{ role ? role : 'none' }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <app-group-domain-role
    (updateGroupMappedRoles)="updateGroupMappedRoles($event)"
    [domains]="openidData.domains"
    [groupMappedRoles]="groupMappedRoles"
    [mappableRoles]="openidData.server.mappable_roles"></app-group-domain-role>
  <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
    <mat-checkbox formControlName="enable">{{
      'ldap.ENABLE_LDAP' | translate
    }}</mat-checkbox>
    <button
      [disabled]="!openidForm.valid || submittingForm"
      color="primary"
      mat-raised-button
      type="submit">
      <mat-spinner
        *ngIf="submittingForm"
        class="btn__spinner mr-2"
        diameter="20"></mat-spinner>
      {{ 'general.SUBMIT' | translate }}
    </button>
  </div>
</form>
